*<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="10"
          ><el-input
            placeholder="请输入要搜索的内容"
            v-model="tex"
            @input="find"
            :clearable="true"
            ><i class="el-icon-search el-input__icon" slot="suffix">
            </i></el-input
        ></el-col>
        <el-col :span="4">
          <el-button @click="find">搜索</el-button>
          <el-button style="margin-left: 80px" type="primary" @click="add"
            >添加商品</el-button
          >
        </el-col>
      </el-row>
      <template>
        <el-table :data="book" style="width: 100%">
          <el-table-column type="index" label="编号"></el-table-column>
          <el-table-column prop="bookname" label="书名"></el-table-column>
          <el-table-column prop="sort" label="类别"></el-table-column>
          <el-table-column prop="price" label="租赁价格"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="true"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作">
            <template scope="scope">
              <el-button type="danger" @click="dele(scope.row.id)"
                >删除</el-button
              >
              <el-button type="warning" @click="revise(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template class="block">
        <el-pagination
          @size-change="sizeChange"
          @current-change="current"
          @prev-click="prev"
          @next-click="next"
          :current-page="page"
          :page-sizes="[3, 6, 9, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, prev, pager, next, jumper, sizes"
          :total="total"
          style="text-align: center; margin-top: 20px"
        >
        </el-pagination>
      </template>
    </el-card>
    <!-- 添加新商品 -->
    <el-dialog title="添加书籍" :visible.sync="dialogTableVisible">
      <el-form
        :model="user"
        status-icon
        :rules="rule"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="书名" prop="bookname">
          <el-input v-model="user.bookname"></el-input>
        </el-form-item>
        <el-form-item label="书籍类别" prop="sort">
          <el-select v-model="user.sort" placeholder="书籍类别">
            <el-option label="科幻" value="科幻"></el-option>
            <el-option label="玄幻" value="玄幻"></el-option>
            <el-option label="言情" value="言情"></el-option>
            <el-option label="名著" value="名著"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="书籍类别">
          <el-input v-model="user.sort" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租赁价格" prop="price">
          <el-input v-model.number="user.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model.number="user.count"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button
          @click="
            dialogTableVisible = false;
            user = { state: true };
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="addQ">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改商品 -->
    <el-dialog title="修改书籍" :visible.sync="dialogTableVisibleRevise">
      <el-form
        :model="reveseBook"
        status-icon
        :rules="rule"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="书名" prop="bookname">
          <el-input v-model="reveseBook.bookname" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="书籍类别">
          <el-input v-model="reveseBook.sort" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="租赁价格" prop="price">
          <el-input v-model.number="reveseBook.price"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="count">
          <el-input v-model.number="reveseBook.count"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogTableVisibleRevise = false">取 消</el-button>
        <el-button type="primary" @click="reviseQ">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    // var validatePass = (rule, value, callback) => {
    //   if (parseInt(value)>= 150 || parseInt(value) < 0) {
    //     callback("价格在0-150块钱之间");
    //   } else {
    //     callback();
    //   }
    // };
    return {
      book: [],
      total: 10, //总页数
      page: 1, //第几页
      pagesize: 3, //几条一页
      tex: "",
      bookAdd: {},
      dialogTableVisible: false,
      dialogTableVisibleRevise: false,
      user: { state: true },
      reveseBook: {},
      rule: {
        bookname: [
          { required: true, message: "请输入书籍名称", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" },
        ],
        price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          { type: "number", message: "价格必须为数字值" },
        ],
        count: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { type: "number", message: "数量必须为数字值" },
        ],
        sort: [{ required: true, message: "请选择书记类别", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.start();
  },
  methods: {
    start() {
      let book = `book?_page=${this.page}&_limit=${this.pagesize}&q=${this.tex}`;
      this.$http.get(book).then((z) => {
        this.book = z.data;
        this.total = parseInt(z.headers["x-total-count"]);
      });
    },
    next(z) {
      this.page = z;
      this.start();
    },
    prev(z) {
      this.page = z;
      this.start();
    },
    current(z) {
      this.page = z;
      this.start();
    },
    sizeChange(z) {
      this.pagesize = z;
      this.start();
    },
    find() {
      this.start();
    },
    add() {
      this.dialogTableVisible = true;
    },
    addQ() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http.post("book", this.user).then((z) => {
            if (z.status == 201) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.start();
              this.dialogTableVisible = false;
              this.user = { state: true };
            }
          });
        }
      });
    },
    dele(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.delete("book/" + id).then((z) => {
            if (z.status == 200) {
              this.start();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    revise(z) {
      this.reveseBook = z;
      this.dialogTableVisibleRevise = true;
    },
    reviseQ(){
      this.$refs.ruleForm.validate((valid) => {
          if (valid){
            this.$http.put("book/"+this.reveseBook.id, this.reveseBook).then((z) => {
            if (z.status == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.start();
              this.dialogTableVisibleRevise = false;
            }
          });
          }
        });
    }
  },
};
</script>

<style>
</style>